<template>
    <div style="padding:10px;background-color: white;">
        <Search @submit="handleSearch" @reset="handleReset">
            <AFormItem label="门店名称" >
                <AInput allow-clear v-model:value="state.formData.storeName" />
            </AFormItem>
            <AFormItem label="门店编码" >
                <AInput allow-clear v-model:value="state.formData.storeCode" />
            </AFormItem>
        </Search>
    </div>
    <div style="padding:10px;margin-top:10px;background-color: white;">
        <div style="margin-bottom: 10px;">
            <AButton v-if="commonStore.$state.user.roleValue!=='cashier'" type="primary" :currentStore="state.currentStore" @click="addStore">新增</AButton>
        </div>
        <ATable :data-source="state.dataSource" :columns="columns" bordered :pagination="false"></ATable>
        <Pagination :pagination="state.pagination" @change="pageChange"></Pagination>
    </div>
    <StoreModal 
    :current-store="state.currentStore" 
    v-if="state.storeModalVisibel"
    @cancel="cancelStoreModal"
    @ok="storeModalOk"></StoreModal>
</template>
<script lang="ts" setup>
import {reactive,h,onMounted} from "vue";
import Search from '@/components/Search/Search.vue';
import Pagination from "@/components/Pagination/index.vue";
import { StoreTypes,CommontTypes, PageResult, ResponseVo} from "@/type"
import { StoreService } from "@/service";
import StoreModal from "./components/StoreModal.vue"
import {Button} from "ant-design-vue";
import { CommonStore } from "@/store";

const commonStore = CommonStore()

const columns = [
    {title:"门店编号",dataIndex:"storeCode"},
    {title:"门店名称",dataIndex:"storeName"},
    {title:"地址",dataIndex:"address"},
    {title:"联系方式",dataIndex:"mobile"},
    {title:"简介",width:300,ellipsis:true,dataIndex:"remark"},
    {title:"状态",dataIndex:"status",customRender:({record}:{record:StoreTypes.IStoreItem})=>{
        return h('div',{},record.status=='1'?`营业中`:'-')
    }},
    {title:"创建人",customRender:({record}:{record:StoreTypes.IStoreItem})=>{
        return h('div',{},`${record.creator}/${record.createTime}`)
    }},
    {title:"修改人",customRender:({record}:{record:StoreTypes.IStoreItem})=>{
        return h('div',{},`${record.updator}/${record.updateTime}`)
    }},
    {title:"操作",customRender:({record}:{record:StoreTypes.IStoreItem})=>{
        return h('div',{},[
        commonStore.$state.user.roleValue!=='cashier'?h(Button,{type:"text",onClick:()=>editStore(record)},"编辑"):null
        ])
    }}
]

const state = reactive<{
    formData: StoreTypes.PageStoreType,
    pagination:CommontTypes.IPagination,
    dataSource:StoreTypes.IStoreItem[],
    storeModalVisibel: boolean,
    currentStore:Partial<StoreTypes.IStoreItem>
}>({
    formData:{},
    pagination:{
        pageNum:1,
        pageSize:10,
        total:0
    },
    dataSource:[],
    storeModalVisibel:false,
    currentStore:{}
})

onMounted(()=>{
    handleSearch();
})

const handleSearch = async()=>{
    const res:ResponseVo<PageResult<StoreTypes.IStoreItem>>= await StoreService.pageStore({...state.formData,...state.pagination});
    if(res.code===0){
        state.dataSource = res.data.list;
        state.pagination.total = res.data.total;
    }
}

const pageChange = (page:number,size:number)=>{
    state.pagination.pageNum = page;
    state.pagination.pageSize = size;
    handleSearch();
}

const handleReset = ()=>{
    state.formData = {};
    state.pagination.pageNum=1;
    state.pagination.total=0;
    handleSearch();
}

const addStore = ()=>{
    state.storeModalVisibel = true;
    state.currentStore = {};
}

const editStore = async(record:StoreTypes.IStoreItem)=>{
    state.currentStore ={};
    let res:ResponseVo<StoreTypes.IStoreItem> =await StoreService.detailStore(record.storeCode);
        console.log(res)
    if(res.code===0){
        state.currentStore = {...res.data};
        console.log("state.currentStore--->",state.currentStore);
        state.storeModalVisibel = true;
    }
}

const cancelStoreModal = ()=>{
    state.storeModalVisibel = false;
}

const storeModalOk = ()=>{
    state.storeModalVisibel = false;
    state.pagination.pageNum=1;
    handleSearch();
}

</script>
<style lang="ts" setup>

</style>